<template>
    <div style="background: #fff;height: 100%;">
        <van-nav-bar title="消息" style="background: #4eb3e9;">
            <template #left>
                <img src="../../../../assets/images/clear.png" @click="handleClear()">
            </template>
        </van-nav-bar>
        <van-row class="msgBox">
            <van-pull-refresh class="pullRefresh" v-model="refreshLoading" @refresh="onRefresh">
                <van-list v-model="loading" :finished="finished" :finished-text="msgList.length ? '没有更多了' : ''" @load="onLoad">
                    <van-swipe-cell v-for="item in msgList" :key="item.mailId">
                        <div class="msgContent" @click="handleDetail(item)">
                            <div class="imgBox" :class="{'hasBgColor': iconObj[item.msgType].bgColor}" :style="{'background-color': iconObj[item.msgType].bgColor || 'none'}">
                                <img :src="(iconObj[item.msgType] && iconObj[item.msgType].src) ? iconObj[item.msgType].src : 'images/msgIcon/101.svg'">
                            </div>
                            <div class="_con">
                                <h5>
                                    {{item.msgTypeName}}
                                    <a v-if="item.readStatus === '1'">●</a>
                                    <span>
                                        {{item.sendTime}}
                                    </span>
                                </h5>
                                <p>{{item.content}}</p>
                            </div>
                        </div>
                    </van-swipe-cell>
                </van-list>
                <van-empty v-if="!loading && !msgList.length" class="custom-image" :image="require('../../../../assets/images/empty.png')" description="暂无数据" />
            </van-pull-refresh>
        </van-row>
    </div>
</template>

<script>
    import { queryMyMails, setMailRead, setMailReadByOneKey } from '@/api/platframe/mainFrame/message.js';

    export default {
        data () {
            return {
                loading: false,
                refreshLoading: false,
                finished: false,
                pageNum: 1,
                msgList: [
                ],
                iconObj: { // 绿色#DAFAFF、蓝色#E3EFFF、红色#FFECEC、橙色#FFEFE5、紫色#e9ecfd
                    '101': { src: 'images/msgIcon/101.svg', bgColor: '' },
                    '102': { src: 'images/msgIcon/102.svg', bgColor: '#e9ecfd' },
                    '103': { src: 'images/msgIcon/103.svg', bgColor: '#FFECEC' },
                    '199': { src: 'images/msgIcon/199.svg', bgColor: '#DAFAFF' },
                    '201': { src: 'images/msgIcon/201.svg', bgColor: '#FFEFE5' },
                    '202': { src: 'images/msgIcon/202.svg', bgColor: '#DAFAFF' },
                    '203': { src: 'images/msgIcon/203.svg', bgColor: '#e9ecfd' },
                    '204': { src: 'images/msgIcon/204.svg', bgColor: '#FFECEC' },
                    '30101': { src: 'images/msgIcon/30101.svg', bgColor: '#E3EFFF' },
                    '30201': { src: 'images/msgIcon/30201.svg', bgColor: '' },
                    '30202': { src: 'images/msgIcon/30202.svg', bgColor: '' },
                    '30203': { src: 'images/msgIcon/30203.svg', bgColor: '' },
                    '30204': { src: 'images/msgIcon/30204.svg', bgColor: '' },
                    '30205': { src: 'images/msgIcon/30205.svg', bgColor: '' },
                    '30206': { src: 'images/msgIcon/30206.svg', bgColor: '' },
                    '30207': { src: 'images/msgIcon/30207.svg', bgColor: '' },
                    '30208': { src: 'images/msgIcon/30208.svg', bgColor: '#DAFAFF' },
                    '30209': { src: 'images/msgIcon/30209.svg', bgColor: '#E3EFFF' },
                    '30301': { src: 'images/msgIcon/30301.svg', bgColor: '' },
                    '30401': { src: 'images/msgIcon/30401.svg', bgColor: '#e9ecfd' },
                    '30501': { src: 'images/msgIcon/30501.svg', bgColor: '' },
                    '30502': { src: 'images/msgIcon/30502.svg', bgColor: '#FFEFE5' },
                    '30503': { src: 'images/msgIcon/30503.svg', bgColor: '#DAFAFF' },
                    '30504': { src: 'images/msgIcon/30504.svg', bgColor: '#E3EFFF' }
                }
            }
        },
        created () {
            this.onRefresh();
        },
        methods: {
            queryMyMailsData () {
                let params = {
                    pageNum: this.pageNum,
                    pageSize: 20
                }
                this.loading = true;
                queryMyMails(params).then(res => {
                    this.loading = false;
                    if (res.code === 1000 && res.data) {
                        this.msgList = [...this.msgList, ...res.data.records];
                        if (this.msgList.length >= res.data.total) {
                            this.finished = true;
                        }
                    } else {
                        this.finished = true;
                    }
                }).catch(() => {
                    this.loading = false;
                    this.finished = true;
                });
            },
            onRefresh () {
                this.refreshLoading = false;
                this.finished = false;
                this.msgList = [];
                this.pageNum = 1;
                this.queryMyMailsData();
            },
            onLoad () {
                this.pageNum++;
                this.queryMyMailsData();
            },
            // 点击详情
            handleDetail (item) {
                if (item.readStatus === '1') {
                    setMailRead(item.mailId);
                }
                this.$router.push({
                    path: '/message/detail?mailId=' + item.mailId
                });
            },
            handleClear () {
                this.$Dialog
                    .confirm({
                        title: "是否确定设置一键已读？",
                    }).then(() => {
                        setMailReadByOneKey().then(res => {
                            if (res.code === 1000) {
                                this.$Notify({ type: "success", message: '设置成功！' });
                                this.onRefresh();
                            }
                        })
                    }).catch(() => { });
            }
        }
    }
</script>

<style scoped lang="less">
    .van-hairline--bottom::after {
        border: 0;
    }
    .van-nav-bar img {
        width: 18px;
        height: 18px;
        transform: rotate(15deg);
    }
    /deep/.van-nav-bar__title {
        color: white;
        font-size: 16px;
    }
    .msgBox {
        width: 100%;
        height: calc(100% - 47px);
        padding: 0 12px;
        box-sizing: border-box;
        overflow: auto;
        .msgContent {
            display: flex;
            align-items: center;
            height: 70px;
            border-top: 1px solid rgba(214, 225, 238, 0.4);
            .imgBox {
                width: 42px;
                height: 42px;
                margin-right: 8px;
                border-radius: 50%;
                overflow: hidden;
                img {
                    width: 100%;
                    height: 100%;
                }
            }
            .hasBgColor img {
                width: 60%;
                display: block;
                margin: 0 auto;
            }
            ._con {
                flex: 1;
                overflow: hidden;
                h5 {
                    font-size: 14px;
                    line-height: 22px;
                    font-family: "PingFang SC";
                    font-style: normal;
                    color: #283f65;
                    margin-bottom: 4px;
                    position: relative;
                    padding-right: 130px;
                    box-sizing: border-box;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    span {
                        position: absolute;
                        right: 0;
                        color: #9ba5b8;
                        font-size: 11px;
                        font-weight: normal;
                    }
                    a {
                        display: inline-block;
                        font-size: 11px;
                        font-weight: normal;
                        vertical-align: super;
                        color: rgb(250, 7, 7);
                    }
                }
                p {
                    font-size: 12px;
                    line-height: 17px;
                    color: #4d6181;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                }
            }
        }
        .van-swipe-cell:nth-of-type(1) .msgContent {
            border-top: 0;
        }
        // 列表空数据
        /deep/.van-empty__image {
            margin-top: 50px;
            width: 100px;
            height: 100px;
        }
    }
</style>
